let cid = 1; //机器人的编号
$.fn.extend({
    /**
     * 
     * @param {Object} headStyle 
     * @param {String} headStyle.headUrl 脸部图片链接 
     * @param {String} headStyle.color  头部颜色
     * @param {number} headStyle.z 机器人z轴的高度
     * @param {boolean} isRandom 是否随机样式
     */
    createModel(headStyle,isRandom) {
        $(document.createElement('style')).html(`
        /* 模特相关css */
@keyframes leftArmSwing${cid}{
    0%{
        transform:rotateY(90deg) translate3d(0, -100px, -250px) rotatez(0deg);
    }
    25%{
        transform:rotateY(90deg) translate3d(0, -100px, -250px) rotatez(60deg);
    }
    50%{
        transform:rotateY(90deg) translate3d(0, -100px, -250px) rotatez(0deg);
    }
    75%{
        transform:rotateY(90deg) translate3d(0, -100px, -250px) rotatez(-60deg);
    }
    100%{
        transform:rotateY(90deg) translate3d(0, -100px, -250px) rotatez(0deg);
    }
}

@keyframes rightArmSwing${cid}{
    0%{
        transform:rotateY(90deg) translate3d(0, -200px, 52px) rotatez(0deg);
    }
    25%{
        transform:rotateY(90deg) translate3d(0, -200px, 52px) rotatez(-60deg);
    }
    50%{
        transform:rotateY(90deg) translate3d(0, -200px, 52px) rotatez(0deg);
    }
    75%{
        transform:rotateY(90deg) translate3d(0, -200px, 52px) rotatez(60deg);
    }
    100%{
        transform:rotateY(90deg) translate3d(0, -200px, 52px) rotatez(0deg);
    }
}
@keyframes leftFootSwing${cid}{
    0%{
        transform:rotateY(90deg) translate3d(0px, -100px, -170px)  rotatez(-90deg);
    }
    25%{
        transform:rotateY(90deg) translate3d(0px, -100px, -170px)  rotatez(-150deg);
    }
    50%{
        transform:rotateY(90deg) translate3d(0px, -100px, -170px)  rotatez(-90deg);
    }
    75%{
        transform:rotateY(90deg) translate3d(0px, -100px, -170px)  rotatez(-30deg);
    }
    100%{
        transform:rotateY(90deg) translate3d(0px, -100px, -170px)  rotatez(-90deg);
    }
}
@keyframes rightFootSwing${cid}{
    0%{
        transform:rotateY(90deg) translate3d(-0px, -200px, -30px)  rotatez(-90deg);
    }
    25%{
        transform:rotateY(90deg) translate3d(-0px, -200px, -30px)  rotatez(-30deg);
    }
    50%{
        transform:rotateY(90deg) translate3d(-0px, -200px, -30px)  rotatez(-90deg);
    }
    75%{
        transform:rotateY(90deg) translate3d(-0px, -200px, -30px)  rotatez(-150deg);
    }
    100%{
        transform:rotateY(90deg) translate3d(-0px, -200px, -30px)  rotatez(-90deg);
    }
}

@keyframes modelSwing${cid}{
    0%{
        transform:translate3d(200px, ${headStyle.z}px,-1200px)
    }
    15%{
        transform:translate3d(200px, ${headStyle.z}px,800px) 
    }
    17.5%{
        transform:translate3d(200px, ${headStyle.z}px,1000px) rotatey(90deg)
    }
    47.5%{
        transform:translate3d(4200px, ${headStyle.z}px,1000px) rotatey(90deg)
    }
    50%{
        transform:translate3d(4400px, ${headStyle.z}px,1000px) rotatey(180deg)
    }
    65%{
        transform:translate3d(4400px, ${headStyle.z}px,-800px) rotatey(180deg)
    }
    67.5%{
        transform:translate3d(4400px, ${headStyle.z}px,-1000px) rotatey(270deg)
    }
    97.5%{
        transform:translate3d(400px, ${headStyle.z}px,-1000px) rotatey(270deg)
    }
    100%{
        transform:translate3d(200px, ${headStyle.z}px,-1200px) rotatey(360deg)
    }
}
.model-${cid}{
    position:absolute;
    transform-style: preserve-3d;
    animation: modelSwing${cid} 14s linear infinite;
}
.mode-${cid}-leftArm-swing{
    animation: leftArmSwing${cid} 3s infinite linear;
}

.mode-${cid}-rightArm-swing{
    animation: rightArmSwing${cid} 2s infinite linear;
}
.mode-${cid}-leftFoot-swing{
    animation: leftFootSwing${cid} 2s infinite linear;
}
.mode-${cid}-rightFoot-swing{
    animation: rightFootSwing${cid} 2s infinite linear;
}
        `).appendTo('head');

        //创建人物的骨骼
        $(document.createElement('div')).attr('class',`model-${cid}`).html(`
<div class="model-${cid}-header"></div>
<div class="model-${cid}-body"></div>
<div class="mode-${cid}-leftArm mode-${cid}-leftArm-swing"></div>
<div class="mode-${cid}-rightArm mode-${cid}-rightArm-swing"></div>
<div class="mode-${cid}-leftFoot mode-${cid}-leftFoot-swing"></div>
<div class="mode-${cid}-rightFoot mode-${cid}-rightFoot-swing"></div>
`)
.appendTo(this);

        //创建头部
        const headerStyle = $.createChildHeadStyle(headStyle.headUrl, headStyle.color)
        $(`.model-${cid}-header`)
            .create3DBox(200, 200, 200, 1, {
                transform: 'rotate3d(1,1,1,0deg)',
            }, headerStyle)

        //创建身体
        const bodyStyle = $.setAllChildStyle({
            backgroundColor: isRandom ?$.getRandomColor() :'rgb(82,139,154)',
            border: 'none'
        });

        $(`.model-${cid}-body`)
            .css({
                transform: 'translatey(100px)'
            })
            .create3DBox(200, 100, 300, 1, {}, bodyStyle)


        //创建手臂
        const armStyle = $.setAllChildStyle({
            backgroundColor: isRandom ?$.getRandomColor() :'rgb(216,160,101)',
        });
        $(`.mode-${cid}-leftArm`)
            .css({
                transform: 'rotateY(90deg) translate3d(0, -100px, -252px) rotatez(0deg)',
                transformOrigin: 'right center'
            })
            .create3DBox(100, 100, 100, 2, {}, armStyle)

        $(`.mode-${cid}-rightArm`)
            .css({
                transform: 'rotateY(90deg) translate3d(0, -200px, 52px) rotatez(0deg)',
                transformOrigin: 'right  center'
            })
            .create3DBox(100, 100, 100, 2, {}, armStyle)

        // 创建脚
        $(`.mode-${cid}-leftFoot`)
            .css({
                transform: 'rotateY(90deg) translate3d(0, -100px, -182px) rotatez(0deg)',
                transformOrigin: 'right center'
            })
            .create3DBox(100, 100, 100, 2, {}, armStyle)

        $(`.mode-${cid}-rightFoot`)
            .css({
                transform: 'rotateY(90deg) translate3d(0, -200px, -12px) rotatez(0deg)',
                transformOrigin: 'right center'
            })
            .create3DBox(100, 100, 100, 2, {}, armStyle)
        
        cid++;
        return this;
    }
})